<template>
  <span>
    <span style="width:100px">
      {{menu.name}}
    </span>
    <span style="float: right; margin-right: 20px">
      <el-button type="text" @click.stop="handleAdd">添加</el-button>
      <el-button type="text" @click.stop="handleEdit">修改</el-button>
      <el-button type="text" @click.stop="handleDelete">删除</el-button>
      <el-button type="text" @click.stop="handlePermission">权限管理</el-button>
    </span>
  </span>
</template>

<script>

export default {
  name: 'MenuItem',
  props: ['menu'],
  data: function() {
    return {
    }
  },
  methods: {
    handleAdd: function() {
      let childData = { parentId: this.menu.id, parentName: this.menu.name, type: 1, name: undefined, url: undefined, description: undefined }
      this.$emit('add', childData)
    },
    handleEdit: async function() {
      let childData = this.menu
      if (this.menu.parentId) {
//        await http.get(http.menu, { pathVar: this.menu.parentId }).then(data => {
//          childData.parentName = data.name
//        })
        let params = {
          parentId:this.menu.parentId
        }
        Object.assign(params, this.menu)
        await  this.$api.saveMenu(params).then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            childData.parentName = res.data.name
          }
        })

      }
      this.$emit('edit', childData)
    },
    handleDelete: function() {
      this.$confirm('确定删除这个菜单', '删除菜单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteMenu(this.menu.id).then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$emit('reload')
          }
        })
      }).catch(() => { })
    },
    handlePermission: function() {
      this.$emit('permission-manage', this.menu)
    }
  }
}
</script>

<style>

</style>
